<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <script src="./static/element-plus/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .register-container {
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }
        .error-message {
            color: red;
            font-size: 12px;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div id="register">
        <el-container>
            <el-header>
                <h1>注册</h1>
            </el-header>
            <el-main>
                <el-form :model="registerForm" label-width="80px" ref="registerFormRef">
                    <el-form-item label="用户名">
                        <el-input v-model="registerForm.username" @blur="validateUsername"></el-input>
                        <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="registerForm.password" @blur="validatePassword"></el-input>
                        <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input type="password" v-model="registerForm.confirmPassword" @blur="validateConfirmPassword"></el-input>
                        <div v-if="confirmPasswordError" class="error-message">{{ confirmPasswordError }}</div>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="registerForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="registerForm.gender">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="兴趣爱好">
                        <el-checkbox-group v-model="registerForm.hobbies">
                            <el-checkbox label="游戏">游戏</el-checkbox>
                            <el-checkbox label="运动">运动</el-checkbox>
                            <el-checkbox label="旅游">旅游</el-checkbox>
                            <el-checkbox label="数码">数码</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="职业">
                        <el-select v-model="registerForm.profession" placeholder="请选择职业">
                            <el-option v-for="profession in professions" :key="profession" :label="profession" :value="profession"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="自我介绍">
                        <el-input type="textarea" v-model="registerForm.introduction"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitRegister">提交</el-button>
                    </el-form-item>
                </el-form>

                <!-- 弹窗 -->
                <el-dialog v-model="dialogVisible" title="请确认注册信息" width="30%">
                    <p>用户名: {{ registerForm.username }}</p>
                    <p>年龄: {{ registerForm.age }}</p>
                    <p>性别: {{ registerForm.gender }}</p>
                    <p>兴趣爱好: {{ registerForm.hobbies.join(', ') }}</p>
                    <p>职业: {{ registerForm.profession }}</p>
                    <p>自我介绍: {{ registerForm.introduction }}</p>
                    <template #footer>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmRegister">确定</el-button>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
    <script>
        const RegisterApp = {
            data() {
                return {
                    dialogVisible: false,
                    registerForm: {
                        username: '',
                        password: '',
                        confirmPassword: '',
                        age: '',
                        gender: '',
                        hobbies: [],
                        profession: '',
                        introduction: ''
                    },
                    professions: ['教师', '程序员', '医生', '护士', '学生', '其他'],
                    usernameError: '',
                    passwordError: '',
                    confirmPasswordError: ''
                };
            },
            methods: {
                validateUsername() {
                    if (this.registerForm.username.length < 4) {
                        this.usernameError = '用户名长度不能少于4个字符';
                    } else {
                        this.usernameError = '';
                    }
                },
                validatePassword() {
                    if (this.registerForm.password.length < 6) {
                        this.passwordError = '密码长度不能少于6个字符';
                    } else {
                        this.passwordError = '';
                    }
                },
                validateConfirmPassword() {
                    if (this.registerForm.confirmPassword !== this.registerForm.password) {
                        this.confirmPasswordError = '两次输入的密码不一致';
                    } else {
                        this.confirmPasswordError = '';
                    }
                },
                submitRegister() {
                    this.validateUsername();
                    this.validatePassword();
                    this.validateConfirmPassword();
                    if (!this.usernameError && !this.passwordError && !this.confirmPasswordError) {
                        this.dialogVisible = true;
                    }
                },
                confirmRegister() {
                    alert('注册成功!');
                    this.dialogVisible = false;
                    // 跳转到登录页面
                    window.location.href = "/login.html";
                }
            }
        };
        Vue.createApp(RegisterApp).use(ElementPlus).mount("#register");
    </script>
</body>
</html>